{% extends "program.html.twig" %}

{% block program %}
    <div class="row">
        <div class="col-xs-12">
            <h4 class="text-center">{{ pageheader }}</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-lg-6 col-lg-offset-3">
            <form class="form-horizontal" method="post" action="{{ urlFor('update-event', {'id': event.event_id}) }}">
                <div class="form-group">
                    <label for="event-day">Day</label>
                    <select class="form-control input-lg" name="event-day" required>
                        {% for day in days|keys %}
                            <option {% if event.event_day == day %}selected{% endif %} value="{{ day }}">{{ day }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="event-start-time">Start time</label>
                    <input type="text" class="form-control input-lg" name="event-start-time" value="{{ event.event_start_time }}" required/>
                </div>
                <div class="form-group">
                    <label for="event-end-time">End time (not required)</label>
                    <input type="text" class="form-control input-lg" name="event-end-time" value="{{ event.event_end_time }}"/>
                </div>
                <div class="form-group">
                    <label for="event-description">Description</label>
                    <input type="text" class="form-control input-lg" name="event-description" value="{{ event.event_description }}" autofocus />
                </div>
                <div class="form-group">
                    <label for="event-details">Details (shown in race facts)</label>
                    <textarea type="text" class="form-control input-lg" name="event-details" rows="5" maxlength="500">{{ event.event_details }}</textarea>
                </div>
                <div class="form-group">
                    <label for="event-category">Category</label>
                    <select class="form-control input-lg" name="event-category" required>
                        {% for category in categories|keys %}
                            <option {% if event.event_category == category %}selected{% endif %} value="{{ category }}">{{ category }}</option>
                        {% endfor %}
                    </select>
                </div> 
                <div class="form-group">
                    <label for="event-description">Venue</label>
                    <select class="form-control input-lg" name="event-venue" required>
                        {% for venue in venues %}
                            <option {% if event.venue_id == venue.venue_id %}selected{% endif %} value="{{ venue.venue_id }}">{{ venue.venue_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3 col-lg-4 col-lg-offset-4">
                        <button type="submit" class="width-35 text-center btn btn-sm btn-default btn-block">
                            Submit update
                        </button>
                    </div>
                </div>

                {% if error is not empty %}
                    <h3 class="text-center"><span class="label label-danger">{{ error }}</span></h3>
                {% endif %}
            </form>
        </div>
    </div>
    <br><br>
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-lg-6 col-lg-offset-3">
            <form class="form-horizontal" method="post" action="{{ urlFor('remove-event', {'id': event.event_id}) }}">
                <div class="form-group">
                    <label for="venue-remove">Type 'remove' here to remove</label>
                    <input type="text" class="form-control input-lg" name="remove" id="remove-input" />
                </div>
                <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3 col-lg-4 col-lg-offset-4">
                        <button type="submit" class="width-35 text-center btn btn-sm btn-danger btn-block" disabled id="remove-button">
                            Remove
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
    $(function(){
        $('#remove-input').keyup(function() {
            var value = $(this).val();
            if(value === "remove"){
                $('#remove-button').removeAttr('disabled');
            } else {
                $('#remove-button').attr('disabled', 'disabled');
            }
        }).keyup();
    });
</script>
{% endblock %}